<template>
  <view class="whole">
    <view class="merchant" v-if="MerchantDetail">
      <image
        v-if="MerchantDetail.logo"
        :src="JSON.parse(MerchantDetail.logo)[0]"
        class="merchant_img"
      />

      <view class="merchant_content">
        <view class="merchant_title">{{ MerchantDetail.name }}</view>
        <view class="merchant_detail"
          >手续费：{{
            (MerchantDetail.commission_rate * 100).toFixed(2)
          }}%</view
        >
      </view>

      <view class="merchant_right" @click="toSetting">
        <image src="/static/setting_icon.png" class="merchant_right_img" />
        <view class="merchant_right_text">设置</view>
      </view>
    </view>

    <view class="wrapper">
      <view class="wrapper_item" v-for="(item, index) in productList">
        <image :src="item.user_product.product.cover" class="wrapper_image" />

        <view class="wrapper_content">
          <view class="wrapper_row1">{{ item.user_product.product.name }}</view>
          <view class="wrapper_row2">NO：{{ item.user_product.no }}</view>
          <view class="wrapper_row3">
            <text v-if="item.status == 1">上架中</text>
            <text v-else-if="item.status == 2">待付款</text>
            <text v-else-if="item.status == 3">交易成功</text>
          </view>
          <view class="wrapper_row4">
            <view class="wrapper_row4_left">¥{{ item.price }}</view>
            <view class="wrapper_row4_right"
              >手续费：<text style="color: #1fe7e7"
                >¥{{ every_fee_computed(item.price) }}</text
              ></view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "../../api/api";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      MerchantDetail: {
        commission_rate: 0,
      },
      productList: [],
    };
  },
  computed: {
    // 每个寄售的手续费
    every_fee_computed() {
      return (price) => {
        let fee = Number(price) * Number(this.MerchantDetail.commission_rate);
        return (fee < 0.01 ? 0.01 : fee).toFixed(2);
      };
    },
  },
  onShow() {
    this.getDetail();
    this.getProductList(true);
  },
  methods: {
    async getDetail() {
      let res = await api.userMerchantDetail({
        method: "get",
        query: {},
        loading: "加载中",
      });

      if (res.code == 0) {
        // 1审核中，2成功，3失败
        // this.review_state = res.data.examine_status;
        this.MerchantDetail = res.data;
      } else {
        tip.defaults(res.msg);
      }
    },

    async getProductList(refresh) {
      if (refresh) {
        this.page = 1;
      }
      let res = await api.consignmentList({
        method: "get",
        query: {},
        loading: "加载中",
      });
      if (res.code === 0) {
        if (refresh) {
          this.pagestate = true;
          this.productList = res.data;
        } else {
          this.productList = this.productList.concat(res.data);
        }
      } else {
        tip.defaults(res.msg);
      }
    },

    toSetting() {
      uni.navigateTo({
        url: "../setMerchant/setMerchant",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
}
.merchant {
  padding: 20rpx 34rpx 20rpx;
  position: relative;
  display: flex;
  align-items: center;
  background: #292b2b;
  &_img {
    width: 120rpx;
    height: 120rpx;
    background: #d8d8d8;
  }
  &_content {
    margin-left: 28rpx;
  }
  &_title {
    // width: 256rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;
  }
  &_detail {
    margin-top: 16rpx;
    // width: 620rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #1fe7e7;
    line-height: 40rpx;
  }
  &_right {
    position: absolute;
    right: 34rpx;
    // top: 42rpx;
    &_img {
      width: 45rpx;
      height: 45rpx;
    }
    &_text {
      margin-top: 10rpx;
      //   width: 40rpx;
      height: 28rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 28rpx;
    }
  }
}
.wrapper {
  margin: 30rpx;
  &_item {
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 240rpx;
    background: #292b2b;

    background-image: url("/static/background.png");
    background-repeat: no-repeat;
    // background-attachment: fixed;
    background-size: 100%;
  }
  &_item + &_item {
    margin-top: 28rpx;
  }
  &_image {
    width: 200rpx;
    height: 200rpx;
  }
  &_content {
    padding-right: 30rpx;
    flex: 1;
    margin-left: 30rpx;
  }
  &_row1 {
    width: 430rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &_row2 {
    margin-top: 26rpx;
    width: 430rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &_row3 {
    margin-top: 6rpx;
    // width: 72rpx;
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #1fe7e7;
    line-height: 34rpx;
    text-align: right;
  }
  &_row4 {
    margin-top: 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_left {
      // width: 136rpx;
      height: 42rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 42rpx;
    }
    &_right {
      //   width: 126rpx;
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;
    }
  }
}
</style>
